<template>
  <div>
    <van-nav-bar title="主页"></van-nav-bar>
    <van-image
      :src="require('../assets/img/引导页/2.jpg')"
      style="width: 100%"
    />
    <div class="log">
      <van-row>
        <van-col span="14">
          <h3>欢迎贵宾光临喜茶</h3>
          <span style="font-size: 5px; color: rgb(103, 103, 103)"
            >可领取阿喜贵宾卡，激活贵宾特权</span
          >
        </van-col>
        <van-col span="10"
          ><van-button @click="goorder" class="button1">前往点单</van-button>
        </van-col>
      </van-row>
    </div>
    <div class="classfly">
      <van-row>
        <van-col span="8" offset="4">
          <h4>门店自取</h4>
          <span style="font-size: 5px">提前下单免排队</span>
        </van-col>
        <van-col span="1">
          <span class="line1" style="color: rgb(204, 155, 110)">|</span>
        </van-col>
        <van-col span="8">
          <h4>喜外送</h4>
          <span style="font-size: 5px">送喜到家更安心</span>
        </van-col>
      </van-row>
    </div>

    <banner-item :banneritemarray="bannerArray"></banner-item>
  </div>
</template>
<script>
import BannerItem from "@/components/BannerItem";
// import ShopItem from '@/components/ShopItem'
export default {
  name: "Homepage.vue",
  data() {
    return {
      dateTime: "",
      username: "",
      selectArray: [],
      bannerArray: [
        {
          name: "时令鲜果",
          thumb: require("../assets/img/banner/7.png"),
          title: "新用户下单，可立享优惠",
          dest: "精选当季新鲜草莓、无奶精轻盈芝士、清幽绿妍茶汤",
          item1: "含茶、乳制品",
        },
        {
          name: "灵感上新",
          thumb: require("../assets/img/banner/8.png"),
          title: "新用户下单，可立享优惠",
          dest: "优选广西槟榔芋定制芋泥，每日现制，任何生椰乳",
          item1: "含椰子、乳制品",
        },
        {
          name: "要吃点",
          thumb: require("../assets/img/banner/10.png"),
          title: "优惠天天有，每天不重样",
          dest: "优选芋泥直牛乳拉丝软糯，品质紫薯蛋糕",
          item1: "含谷物、大豆、蛋、椰子",
        },
      ],
    };
  },
  beforeMount() {
    var sessionstorage = window.sessionStorage;
    this.username = sessionstorage.getItem(name);
    this.address = sessionstorage.address;
  },

  components: {
    BannerItem,
    // ShopItem
  },
  methods: {
    goorder: function () {
      this.$router.push("/order");
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.dateTime = new Date().toString();
    });
  },
};
</script>
<style scoped>
.user1 {
  font-size: 14px;
  color: rgb(28, 28, 28);
  padding: 4px;
}

.log {
  position: absolute;
  width: 96%;
  padding: 10px 0px;
  margin-top: -20px;
  margin-left: 15px;
  background-color: rgb(249, 249, 249);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.log h3 {
  margin: 8px 0px;
}
.button1 {
  width: 80%;
  height: 40px;
  margin-top: 4px;
  background-color: rgb(0, 0, 0);
  color: aliceblue;
  font-size: medium;
}
.classfly {
  width: 96%;
  margin-left: 15px;
  margin-top: 80px;
  padding: 10px 0 10px 0;
  background-color: rgb(240, 236, 230);
}
.classfly h4 {
  margin: 2px;
}
.button1 {
  width: 100%;
  height: 60px;
  border-radius: 0px;
  margin-top: 5px;
  color: #fff;
  background-color: rgb(0, 0, 0);
}
.van-nav-bar__title {
  color: rgb(255, 255, 255);
}
.van-nav-bar {
  background-color: rgb(51, 51, 51);
}
.van-icon-arrow-left:before {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff;
}
</style>
